<template>
    <div class="table-page">
        <div class="table-search-box" @keyup.enter="search()">
            <div v-if="initParam.all" class="search-item">
                <label>充值账号：</label>
                <div class="table-query-input">
                    <el-select v-model="queryData.userId"
                               v-loading="userLoading"
                               filterable
                               clearable
                               placeholder="请选择">
                        <el-option
                            v-for="item in userList"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id">
                        </el-option>
                    </el-select>
                </div>
            </div>
            <div class="search-item">
                <label>类型：</label>
                <div class="table-query-input">
                    <el-select
                        v-model="queryData.type"
                        filterable
                        clearable
                        placeholder="请选择"
                    >
                        <el-option
                            v-for="item in agentRechargeTypes"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        >
                        </el-option>
                    </el-select>
                </div>
            </div>
            <div class="search-item">
                <el-button
                    type="primary"
                    icon="el-icon-search"
                    :loading="tableLoading"
                    @click="clickSearch()"
                >搜索
                </el-button>
            </div>
            <div class="search-item">
                <el-button
                    icon="el-icon-refresh"
                    :loading="tableLoading"
                    @click="resetSearch()"
                >重置
                </el-button>
            </div>
    </div>
    <div class="table-data-box">
        <el-table
            ref="table"
            v-loading="tableLoading"
            :data="tableData"
            border
            style="width: 100%;min-height:40em"
            row-key="id"
        >
            <el-table-column
                prop="createdByName"
                label="操作人"
            ></el-table-column>
            <el-table-column
                prop="rechargeUser"
                label="充值账号"
            ></el-table-column>
            <el-table-column prop="type" label="充值类型" width="200">
                <template slot-scope="scope">
                    <k-tag
                        :tag="agentRechargeType[scope.row.type]"
                    ></k-tag>
                </template>
            </el-table-column>
            <el-table-column
                prop="amount"
                label="充值金额"
                width="200"
            >
                <template slot-scope="scope">
                    {{ priceChange(scope.row.amount) }}
                </template>
            </el-table-column>
            <el-table-column
                prop="createdTime"
                label="充值时间"
                width="200"
            ></el-table-column>
            <el-table-column
                prop="remark"
                label="备注"
                show-overflow-tooltip
            ></el-table-column>
        </el-table>
    </div>
    <div v-if="pageData.total" class="xy-between table-page-box">
        <el-pagination
            background
            :current-page.sync="pageData.currentPage"
            :page-sizes="pageData.pageSizes"
            :page-size.sync="pageData.pageSize"
            layout="total,  prev, pager, next, sizes, jumper"
            :total="pageData.total"
        >
        </el-pagination>
    </div>
    </div>
</template>

<script>
import {TablePage} from "@/layout/mixin/iVue.js";
import {mapState} from "vuex";
import {getAgentList, getAgentUserList} from "@/api/user.js";

export default {
    name: "RechargeListComponent",
    components: {},
    mixins: [TablePage],
    props: {
        initParam: {
            type: Object,
            default() {
                return {
                    all: "true"
                };
            }
        }
    },
    data() {
        return {
            queryData: {
                all: this.initParam.all,
                name: "",
                agentId: "",
                type: null
            },
            userLoading: false,
            userList: [],
            agentRechargeTypes: [
                {
                    value: "normal",
                    label: "普通充值"
                },
                {
                    value: "refund",
                    label: "充值退款"
                },
                {
                    value: "orderConsum",
                    label: "订单消费"
                },
                {
                    value: "orderRefund",
                    label: "订单退款"
                }
            ],
            agentLoading: false,
            agentList: []
        };
    },
    computed: {
        ...mapState({
            agentRechargeType: state => state.status.agentRechargeType
        })
    },
    watch: {},
    created() {
        if (this.queryData.all) {
            this.getUserList();
        }
    },
    mounted() {
    },
    methods: {
        search(queryData) {
            this.loadTable("/user/cu/agent/recharge/page", this.queryData);
        },
        getUserList() {
            this.userLoading = true;
            getAgentUserList({size: 1000,first:true}).then(res => {
                this.userList = res;
            }).finally(() => {
                this.userLoading = false;
            })

        },
        priceChange(number) {
            const bs = number / 100;
            return bs.toFixed(2) + "元";
        },
        getAgentList() {
            this.agentLoading = true;
            getAgentList({size: 1000})
                .then(res => {
                    this.agentList = res;
                })
                .finally(() => {
                    this.agentLoading = false;
                });
        }
    }
};
</script>

<style lang="scss" scoped>
.school-logo {
    .logo-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 108px;
        height: 108px;
        line-height: 108px;
        text-align: center;
    }

    .logo-img {
        width: 108px;
        height: 108px;
        display: block;
    }
}

.table-edit-from {
    .address-select {
        width: 8em;
        margin-right: 2em;
    }
}
</style>
<style>
.school-logo .logo-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.school-logo .logo-uploader .el-upload:hover {
    border-color: #409eff;
}
</style>
